<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
	         //1.监听事件
	           //可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
	                <button v-on:click="count++">{{count}}</button>
	                var vm = new Vue({
						  el: '#app',
						  data: {
						    count: 0
						  }
					})
	         //2.事件处理方法
	           //直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称
	           		<button v-on:click="add">{{count}}</button>
	                var vm = new Vue({
						  el: '#app',
						  data: {
						    count: 0
						  },
						  methods:{
						  	 add(){
						  	 	this.count++
						  	 }
						  }
					})
	        //3.内联处理器中的方法
	          //可以在内联 JavaScript 语句中调用方法
	          		  <button v-on:click="add(2)">{{count}}</button>
			           var vm = new Vue({
							  el: '#app',
							  data: {
							    count: 0
							  },
							  methods:{
							  	 add(num){
							  	 	this.count += num
							  	 }
							  }
						})
			  //有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
			   		  <button v-on:click="add(2,$event)">{{count}}</button>
			          var vm = new Vue({
							  el: '#app',
							  data: {
							    count: 0
							  },
							  methods:{
							  	 add(num,event){
							  	 	this.count += num;
							  	 	console.log(this.event);
							  	 }
							  }
					  })
			//4.事件修饰符
			     //.stop 阻止事件冒泡
			     //.prevent 阻止事件的默认行为
		</script>
	</body>
</html>
